<template>
  <el-popover placement="bottom" width="200px" trigger="click">
    <!-- 使用匿名插槽,替代 content  -->
    <template #default>
      <!-- 用菜单组件,实现分类消息显示效果 -->
      <slot></slot>
    </template>
    <!-- 铃形提示图标 -->
    <template #reference>
      <el-badge style="cursor: pointer;" :value="value" :max="max" :is-dot="false">
        <component :is="`el-icon-${icon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`" />
      </el-badge>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
let props = defineProps({
  // 自定义图标
  icon: {
    type: String,
    default: 'Bell',
  },
  // 角标的值
  value: {
    type: [String, Number],
    default: '',
  },
  // 显示的最大值,超过则显示 +(只支持 value为Number)
  max: {
    type: Number,
    default: 99,
  },
})
</script>

<style scoped lang="scss"></style>
